@brickclay-org/ui 0.0.49 → 0.0.51

package/index.d.ts

@@ -6,7 +6,7 @@ import * as i1 from '@angular/common';
 import { ControlValueAccessor, NgControl, NgModel } from '@angular/forms';
 import { CdkDragDrop, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';
 import * as i1$2 from '@angular/cdk/dialog';
-import { CdkDialogContainer, DialogRef as DialogRef$1 } from '@angular/cdk/dialog';
+import { CdkDialogContainer, DialogRef } from '@angular/cdk/dialog';
 import * as i2 from '@angular/cdk/overlay';
 import { ScrollStrategy } from '@angular/cdk/overlay';
 import * as i3 from '@angular/cdk/portal';
@@ -875,7 +875,7 @@ declare class BkTabs {
 }
 
 /**
- * DialogContainerComponent
+ * BkDialogContainerComponent
  *
  * Architecture Decision:
  * ─────────────────────
@@ -895,19 +895,19 @@ declare class BkTabs {
  *   • 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()`.
  */
 
-declare class DialogContainerComponent extends CdkDialogContainer implements OnInit {
+declare class BkDialogContainerComponent extends CdkDialogContainer implements OnInit {
     /**
      * Our full config (including animation fields).
-     * Provided by DialogService via the INTERNAL_DIALOG_CONFIG token.
+     * Provided by BkDialogService via the INTERNAL_DIALOG_CONFIG token.
      */
     private readonly _dialogConfig;
     /**
      * 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`.
      */
     private _resolveOpened;
     readonly opened: Promise<void>;
@@ -927,7 +927,7 @@ declare class DialogContainerComponent extends CdkDialogContainer implements OnI
     private _playEnterAnimation;
     /**
      * 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(): Promise<void>;
@@ -941,12 +941,12 @@ declare class DialogContainerComponent extends CdkDialogContainer implements OnI
      * Walk up from our host → pane → wrapper, then query for the backdrop.
      */
     private _getBackdropElement;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DialogContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DialogContainerComponent, "bk-dialog-container", never, {}, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BkDialogContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkDialogContainerComponent, "bk-dialog-container", never, {}, {}, never, never, true, never>;
 }
 
 /**
- * DialogRef — Handle returned to callers by `DialogService.open()`.
+ * BkDialogRef — Handle returned to callers by `BkDialogService.open()`.
  *
  * Architecture Decision:
  * ─────────────────────
@@ -964,7 +964,7 @@ declare class DialogContainerComponent extends CdkDialogContainer implements OnI
 
 /**
  * Minimal interface for the container's capabilities.
- * Avoids a direct import of `DialogContainerComponent` in this file
+ * Avoids a direct import of `BkDialogContainerComponent` in this file
  * (container imports nothing from ref, so no cycle, but this keeps
  * the coupling lightweight).
  *
@@ -977,14 +977,14 @@ interface DialogAnimatable {
     _addAriaLabelledBy?(id: string): void;
     _removeAriaLabelledBy?(id: string): void;
 }
-declare class DialogRef<T = unknown, R = unknown> {
+declare class BkDialogRef<T = unknown, R = unknown> {
     /**
      * @internal Wrapped CDK ref.
      * Typed as `CdkDialogRef<any>` to avoid deep generic-variance issues
      * that arise from CDK's `config.providers` callback signature.
      * The public API (`afterClosed`, etc.) re-types the observables.
      */
-    readonly _cdkRef: DialogRef$1<any>;
+    readonly _cdkRef: DialogRef<any>;
     /** Unique dialog identifier (managed by CDK). */
     readonly id: string;
     /** Instance of the component rendered inside the dialog. */
@@ -1002,7 +1002,7 @@ declare class DialogRef<T = unknown, R = unknown> {
      * that arise from CDK's `config.providers` callback signature.
      * The public API (`afterClosed`, etc.) re-types the observables.
      */
-    _cdkRef: DialogRef$1<any>);
+    _cdkRef: DialogRef<any>);
     /**
      * Close the dialog, optionally returning a result.
      * Plays the WAAPI leave animation, then delegates to CDK for cleanup.
@@ -1059,13 +1059,13 @@ declare class DialogRef<T = unknown, R = unknown> {
  */
 
 /**
- * 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`.
  */
 declare abstract class BkDialogLayoutSection implements OnInit, OnDestroy {
-    protected _dialogRef: DialogRef | null;
+    protected _dialogRef: BkDialogRef | null;
     protected _elementRef: ElementRef<any>;
     private _dialogService;
     ngOnInit(): void;
@@ -1184,7 +1184,7 @@ declare class BkDialogClose implements OnInit, OnChanges {
 
 declare class BkDialogModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<BkDialogModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<BkDialogModule, never, [typeof i1$2.DialogModule, typeof i2.OverlayModule, typeof i3.PortalModule, typeof DialogContainerComponent, typeof BkDialogTitle, typeof BkDialogContent, typeof BkDialogActions, typeof BkDialogClose], [typeof BkDialogTitle, typeof BkDialogContent, typeof BkDialogActions, typeof BkDialogClose]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BkDialogModule, never, [typeof i1$2.DialogModule, typeof i2.OverlayModule, typeof i3.PortalModule, typeof BkDialogContainerComponent, typeof BkDialogTitle, typeof BkDialogContent, typeof BkDialogActions, typeof BkDialogClose], [typeof BkDialogTitle, typeof BkDialogContent, typeof BkDialogActions, typeof BkDialogClose]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<BkDialogModule>;
 }
 
@@ -1193,14 +1193,14 @@ declare class BkDialogModule {
  *
  * 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,
@@ -1212,19 +1212,19 @@ declare class BkDialogModule {
  * Built-in WAAPI animation presets.
  * 'none' disables animation entirely.
  */
-type DialogAnimation = 'none' | 'fade' | 'zoom' | 'slide-top' | 'slide-bottom' | 'slide-left' | 'slide-right';
+type BkDialogAnimation = 'none' | 'fade' | 'zoom' | 'slide-top' | 'slide-bottom' | 'slide-left' | 'slide-right';
 /**
  * Fine-grained position offsets.
  * When provided, the dialog shifts from the default centred position.
  * Internally this is mapped to CDK's `GlobalPositionStrategy`.
  */
-interface DialogPosition {
+interface BkDialogPosition {
     top?: string;
     bottom?: string;
     left?: string;
     right?: string;
 }
-interface DialogConfig<D = unknown> {
+interface BkDialogConfig<D = unknown> {
     /**
      * Unique dialog identifier.
      * CDK auto-generates one if omitted and validates uniqueness —
@@ -1266,13 +1266,13 @@ interface DialogConfig<D = unknown> {
     /** Payload injected into the dialog component via `DIALOG_DATA`. */
     data?: D;
     /** Panel animation preset.  Default `'fade'`. */
-    animation?: DialogAnimation;
+    animation?: BkDialogAnimation;
     /** Enter animation duration in ms.  Default `200`. */
     animationDurationEnter?: number;
     /** Leave animation duration in ms.  Default `150`. */
     animationDurationLeave?: number;
     /** Position offsets — moves the dialog from its default centred position. */
-    position?: DialogPosition;
+    position?: BkDialogPosition;
     role?: 'dialog' | 'alertdialog';
     ariaLabel?: string;
     ariaLabelledBy?: string;
@@ -1289,10 +1289,10 @@ interface DialogConfig<D = unknown> {
     /** Override CDK's scroll strategy for this dialog. */
     scrollStrategy?: ScrollStrategy;
 }
-declare const DEFAULT_DIALOG_CONFIG: DialogConfig;
+declare const BK_DEFAULT_DIALOG_CONFIG: BkDialogConfig;
 
 /**
- * DialogService — The core engine of the custom dialog system.
+ * BkDialogService — The core engine of the custom dialog system.
  *
  * Architecture Decision:
  * ─────────────────────
@@ -1303,10 +1303,10 @@ declare const DEFAULT_DIALOG_CONFIG: DialogConfig;
  *     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.).
  *
@@ -1329,11 +1329,11 @@ declare const DEFAULT_DIALOG_CONFIG: DialogConfig;
  * ─────────────
  * 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.
  */
 
-declare class DialogService {
+declare class BkDialogService {
     private readonly _cdkDialog;
     private readonly _overlay;
     private readonly _globalConfig;
@@ -1345,7 +1345,7 @@ declare 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
@@ -1356,20 +1356,20 @@ declare class DialogService {
      * ref.afterClosed().subscribe(result => console.log(result));
      * ```
      */
-    open<T, D = unknown, R = unknown>(component: Type<T>, config?: DialogConfig<D>): DialogRef<T, R>;
+    open<T, D = unknown, R = unknown>(component: Type<T>, config?: BkDialogConfig<D>): BkDialogRef<T, R>;
     /**
      * Close all currently open dialogs (most recent first).
      */
     closeAll(): void;
     /**
-     * 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(): DialogRef | undefined;
+    getTopDialog(): BkDialogRef | undefined;
     /**
      * Get a dialog by its CDK-managed unique ID.
      */
-    getDialogById(id: string): DialogRef | undefined;
+    getDialogById(id: string): BkDialogRef | undefined;
     /**
      * Number of currently open dialogs.
      */
@@ -1377,10 +1377,10 @@ declare 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(): readonly DialogRef[];
+    get openDialogsRef(): readonly BkDialogRef[];
     /**
      * Open a simple confirmation dialog.
      * Resolves `true` if the user confirms, `false` otherwise.
@@ -1401,7 +1401,7 @@ declare class DialogService {
         btnCancelText?: string;
         width?: string;
         component: Type<unknown>;
-    }): DialogRef<unknown, boolean>;
+    }): BkDialogRef<unknown, boolean>;
     /**
      * Open a simple alert dialog.
      */
@@ -1411,7 +1411,7 @@ declare class DialogService {
         btnOkText?: string;
         width?: string;
         component: Type<unknown>;
-    }): DialogRef<unknown, void>;
+    }): BkDialogRef<unknown, void>;
     /**
      * Subscribe to backdrop-click and ESC events on the CDK ref,
      * closing the dialog based on our config flags.
@@ -1431,8 +1431,8 @@ declare class DialogService {
      * Falls back to centred (both axes) when no position is specified.
      */
     private _buildPositionStrategy;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DialogService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<DialogService>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BkDialogService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<BkDialogService>;
 }
 
 /**
@@ -1449,8 +1449,8 @@ declare class DialogService {
  *   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.
  */
 
 /**
@@ -1462,10 +1462,10 @@ declare class DialogService {
  *
  * Usage inside a dialog component:
  * ```ts
- * constructor(@Inject(DIALOG_DATA) public data: MyDataType) {}
+ * constructor(@Inject(BK_DIALOG_DATA) public data: MyDataType) {}
  * ```
  */
-declare const DIALOG_DATA: InjectionToken<any>;
+declare const BK_DIALOG_DATA: InjectionToken<any>;
 /**
  * Optional token for providing global dialog defaults at the
  * application level.
@@ -1473,11 +1473,11 @@ declare const DIALOG_DATA: InjectionToken<any>;
  * 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' } }
  * ]
  * ```
  */
-declare const DIALOG_GLOBAL_CONFIG: InjectionToken<DialogConfig<unknown>>;
+declare const BK_DIALOG_GLOBAL_CONFIG: InjectionToken<BkDialogConfig<unknown>>;
 
 /**
  * Dialog Animations
@@ -1492,20 +1492,20 @@ declare const DIALOG_GLOBAL_CONFIG: InjectionToken<DialogConfig<unknown>>;
  *  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()`.
  */
 
-interface AnimationKeyframes {
+interface BkAnimationKeyframes {
     keyframes: Keyframe[];
     options: KeyframeAnimationOptions;
 }
 /**
  * Build enter/leave WAAPI keyframes for the dialog **panel** element.
  */
-declare function getDialogPanelAnimation(preset: DialogAnimation, enterDuration: number, leaveDuration: number): {
-    enter: AnimationKeyframes;
-    leave: AnimationKeyframes;
+declare function getDialogPanelAnimation(preset: BkDialogAnimation, enterDuration: number, leaveDuration: number): {
+    enter: BkAnimationKeyframes;
+    leave: BkAnimationKeyframes;
 };
 /**
  * Build enter/leave WAAPI keyframes for the **backdrop** element.
@@ -1513,8 +1513,8 @@ declare function getDialogPanelAnimation(preset: DialogAnimation, enterDuration:
  * panel animation preset.
  */
 declare function getDialogBackdropAnimation(enterDuration: number, leaveDuration: number): {
-    enter: AnimationKeyframes;
-    leave: AnimationKeyframes;
+    enter: BkAnimationKeyframes;
+    leave: BkAnimationKeyframes;
 };
 
 declare class BKTooltipDirective implements OnInit, OnChanges, OnDestroy {
@@ -1553,5 +1553,72 @@ declare class BkValidator implements OnInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<BkValidator, "bk-validator", never, { "control": { "alias": "control"; "required": false; }; "label": { "alias": "label"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "showError": { "alias": "showError"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-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 type { AnimationKeyframes, BadgeColor, BadgeSize, BadgeVariant, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, CalendarSelection, CountryOption, DialogAnimation, DialogConfig, DialogPosition, GroupItem, GroupMode, IconButtonSize, IconButtonVariant, IconOrientation, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TabItem, TableAction, TableColumn, TimeConfiguration };
+type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+type AvatarFallback = 'auto' | 'initials' | 'icon' | 'camera';
+declare class AvatarProfile implements OnDestroy, ControlValueAccessor {
+    src: string | null;
+    alt: string;
+    name: string;
+    size: AvatarSize;
+    fallback: AvatarFallback;
+    /** Whether upload / remove actions are enabled */
+    editable: boolean;
+    /** Accepted file MIME types for the file picker */
+    accept: string;
+    /** Max file size in KB (0 = no limit) */
+    maxFileSizeKB: number;
+    /** Label shown on the upload button */
+    uploadLabel: string;
+    /** Hint text shown below the upload button */
+    hint: string;
+    /** External loading state (e.g. while uploading) */
+    loading: boolean;
+    /** Whether the remove badge is shown when an image is present */
+    removable: boolean;
+    /** Label displayed above the avatar */
+    label: string;
+    /** Whether the field is required (shows asterisk) */
+    required: boolean;
+    /** External error state flag */
+    hasError: boolean;
+    /** Error message to display when hasError is true */
+    errorMessage: string;
+    /** Disabled state (also set via CVA setDisabledState) */
+    disabled: boolean;
+    /** Emits the selected File after validation passes */
+    fileSelected: EventEmitter<any>;
+    /** Emits when the user clicks the remove badge */
+    removed: EventEmitter<void>;
+    /** Emits a human-readable error string on validation failure */
+    fileError: EventEmitter<string>;
+    initials: string;
+    imageLoadFailed: boolean;
+    /** Local blob URL for instant preview before server upload completes */
+    private previewUrl;
+    private onChange;
+    private onTouched;
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    onImageError(): void;
+    /** The URL the template should display — local preview takes priority over the server src */
+    get displaySrc(): string | null;
+    get showInitials(): boolean;
+    get containerClasses(): string;
+    get sizeClasses(): AvatarSize[];
+    get showRemoveButton(): boolean;
+    onFileSelected(event: Event): void;
+    onRemove(): void;
+    /** Revoke the previous object URL to free memory */
+    private revokePreview;
+    private isFileTypeValid;
+    private getInitials;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarProfile, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarProfile, "bk-avatar-profile", never, { "src": { "alias": "src"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "fallback": { "alias": "fallback"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "maxFileSizeKB": { "alias": "maxFileSizeKB"; "required": false; }; "uploadLabel": { "alias": "uploadLabel"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "fileSelected": "fileSelected"; "removed": "removed"; "fileError": "fileError"; }, never, never, true, never>;
+}
+
+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 };
+export type { AvatarFallback, AvatarSize, BadgeColor, BadgeSize, BadgeVariant, BkAnimationKeyframes, BkDialogAnimation, BkDialogConfig, BkDialogPosition, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, CalendarSelection, CountryOption, GroupItem, GroupMode, IconButtonSize, IconButtonVariant, IconOrientation, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TabItem, TableAction, TableColumn, TimeConfiguration };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "schematics": "./schematics/collection.json",
   "ng-add": {
     "save": "dependencies"

package/src/lib/avatar-profile/avatar-profile.css

@@ -0,0 +1,80 @@
+/* =========================
+   Container
+========================= */
+.avatar-profile-container {
+  @apply flex flex-col gap-1.5;
+}
+
+/* =========================
+   Label
+========================= */
+.avatar-profile-label {
+  @apply text-sm font-medium text-[#141414];
+}
+
+.avatar-profile-label-required {
+  @apply text-[#E7000B] ml-0.5;
+}
+
+/* =========================
+   Error message
+========================= */
+.avatar-profile-error {
+  @apply text-xs text-[#E7000B] font-normal;
+}
+
+/* =========================
+   Base Avatar
+========================= */
+.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];}
+
+/* =========================
+   Sizes (container + text)
+========================= */
+.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; }
+
+/* =========================
+   Placeholder Icon Sizes
+========================= */
+.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
+========================= */
+.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;
+}

package/src/styles.css

@@ -16,3 +16,4 @@
 @import './lib/tabs/tabs.css';
 @import './lib/dialog/dialog-container.css';
 @import './lib/tooltip/tooltip-directive.css';
+@import './lib/avatar-profile/avatar-profile.css';