@brickclay-org/ui 0.0.49 → 0.0.50

package/index.d.ts

@@ -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, 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, AvatarFallback, AvatarSize, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "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';