@brickclay-org/ui 0.0.59 → 0.0.60

package/index.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { OnInit, OnDestroy, OnChanges, EventEmitter, ElementRef, SimpleChanges, AfterViewInit, QueryList, ComponentRef, Type, InjectionToken, Renderer2, ApplicationRef, EnvironmentInjector } from '@angular/core';
-import { ControlValueAccessor, NgControl, NgModel } from '@angular/forms';
+import { OnInit, OnDestroy, OnChanges, EventEmitter, ElementRef, SimpleChanges, AfterViewInit, QueryList, ComponentRef, Type, InjectionToken, Renderer2, ApplicationRef, EnvironmentInjector, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor, NgControl, NgModel, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
 import * as i1 from '@angular/common';
@@ -1593,14 +1593,14 @@ 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>;
 }
 
-type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
-type AvatarFallback = 'auto' | 'initials' | 'icon' | 'camera';
-declare class AvatarProfile implements OnDestroy, ControlValueAccessor {
+type BkAvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+type BkAvatarFallback = 'auto' | 'initials' | 'icon' | 'camera';
+declare class BkAvatarProfile implements OnDestroy, ControlValueAccessor, Validator {
     src: string | null;
     alt: string;
     name: string;
-    size: AvatarSize;
-    fallback: AvatarFallback;
+    size: BkAvatarSize;
+    fallback: BkAvatarFallback;
     /** Whether upload / remove actions are enabled */
     editable: boolean;
     /** Accepted file MIME types for the file picker */
@@ -1642,6 +1642,7 @@ declare class AvatarProfile implements OnDestroy, ControlValueAccessor {
     registerOnChange(fn: (value: string | null) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
+    validate(control: AbstractControl): ValidationErrors | null;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     onImageError(): void;
@@ -1649,7 +1650,7 @@ declare class AvatarProfile implements OnDestroy, ControlValueAccessor {
     get displaySrc(): string | null;
     get showInitials(): boolean;
     get containerClasses(): string;
-    get sizeClasses(): AvatarSize[];
+    get sizeClasses(): BkAvatarSize[];
     get showRemoveButton(): boolean;
     onFileSelected(event: Event): void;
     /**
@@ -1662,8 +1663,8 @@ declare class AvatarProfile implements OnDestroy, ControlValueAccessor {
     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>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BkAvatarProfile, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkAvatarProfile, "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>;
 }
 
 /** Generic hierarchical node; works with note types and any similar tree. */
@@ -1844,5 +1845,47 @@ declare class BkToastr {
     static ɵcmp: i0.ɵɵComponentDeclaration<BkToastr, "bk-toastr", never, {}, {}, 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, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CalendarSelection, getDialogBackdropAnimation, getDialogPanelAnimation };
-export type { AvatarFallback, AvatarSize, BadgeColor, BadgeSize, BadgeVariant, BkAnimationKeyframes, BkDialogAnimation, BkDialogConfig, BkDialogPosition, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, CountryOption, GroupItem, GroupMode, HierarchicalNode, IconButtonSize, IconButtonVariant, IconOrientation, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TabItem, TableAction, TableColumn, TimeConfiguration, ToastConfig, ToastMessage, ToastMethodOptions, ToastPosition, ToastSeverity };
+type AvatarSize = 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+type AvatarVariant = 'gray' | 'colored';
+type DotStatus = 'active' | 'inactive' | 'notification' | 'none';
+type DotPosition = 'bottom-right' | 'top-left';
+type AvatarFallback = 'auto' | 'initials' | 'icon';
+declare class BkUiAvatar implements OnChanges, ControlValueAccessor {
+    private cdr;
+    constructor(cdr: ChangeDetectorRef);
+    src: string | null;
+    alt: string;
+    name: string;
+    size: AvatarSize;
+    variant: AvatarVariant;
+    fallback: AvatarFallback;
+    dot: DotStatus;
+    dotPosition: DotPosition;
+    /** Emits when the provided image URL fails to load */
+    imageLoadError: EventEmitter<void>;
+    initials: string;
+    imageLoadFailed: boolean;
+    private onChange;
+    private onTouched;
+    /**
+     * Called by the forms system when the model value changes (ngModel / formControl).
+     * Sets the src directly and tells OnPush to re-check the template.
+     */
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(_isDisabled: boolean): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    onImageError(): void;
+    get showImage(): boolean;
+    get showInitials(): boolean;
+    get showIcon(): boolean;
+    get containerClasses(): string;
+    get dotClasses(): string;
+    private getInitials;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BkUiAvatar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkUiAvatar, "bk-ui-avatar", never, { "src": { "alias": "src"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "fallback": { "alias": "fallback"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; "dotPosition": { "alias": "dotPosition"; "required": false; }; }, { "imageLoadError": "imageLoadError"; }, never, never, true, never>;
+}
+
+export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatarProfile, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkUiAvatar, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CalendarSelection, getDialogBackdropAnimation, getDialogPanelAnimation };
+export type { AvatarFallback, AvatarSize, AvatarVariant, BadgeColor, BadgeSize, BadgeVariant, BkAnimationKeyframes, BkAvatarFallback, BkAvatarSize, BkDialogAnimation, BkDialogConfig, BkDialogPosition, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, CountryOption, DotPosition, DotStatus, GroupItem, GroupMode, HierarchicalNode, IconButtonSize, IconButtonVariant, IconOrientation, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TabItem, TableAction, TableColumn, TimeConfiguration, ToastConfig, ToastMessage, ToastMethodOptions, ToastPosition, ToastSeverity };

package/package.json

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

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

@@ -0,0 +1,71 @@
+/* =========================
+   Base Avatar
+========================= */
+.avatar {
+  @apply relative inline-flex items-center justify-center
+  rounded-full flex-shrink-0 select-none
+  transition-all duration-200;
+}
+
+.avatar-img {
+  @apply w-full h-full object-cover rounded-full;
+}
+
+.avatar-text {
+  @apply font-medium;
+}
+
+/* =========================
+   Sizes (container + text)
+========================= */
+.xsm { @apply size-6 text-[10px] leading-[14px]; }
+.sm  { @apply size-8 text-sm; }
+.md  { @apply size-10 text-base; }
+.lg  { @apply size-12 text-[18px] leading-[26px]; }
+.xl  { @apply size-14 text-xl; }
+.xxl { @apply size-16 text-xl; }
+
+/* =========================
+   Placeholder Icon Sizes
+========================= */
+.xsm .placeholder-icon { @apply size-4; }
+.sm  .placeholder-icon { @apply size-5; }
+.md  .placeholder-icon { @apply size-6; }
+.lg  .placeholder-icon { @apply size-7; }
+.xl  .placeholder-icon,
+.xxl .placeholder-icon { @apply size-8; }
+
+/* =========================
+   Status Dot (Base)
+========================= */
+.avatar-dot {
+  @apply absolute rounded-full block box-content
+  border-[1.5px] border-white;
+}
+
+/* Dot size follows avatar size */
+.xsm .avatar-dot { @apply size-1; }
+.sm  .avatar-dot { @apply size-1.5; }
+.md  .avatar-dot { @apply size-2.5; }
+.lg  .avatar-dot { @apply size-3; }
+.xl  .avatar-dot { @apply size-[14px]; }
+.xxl .avatar-dot { @apply size-4; }
+
+/* =========================
+   Dot Variants
+========================= */
+.active {
+  @apply bg-[#22973F];
+}
+
+.inactive {
+  @apply bg-gray-300;
+}
+
+.notification {
+  @apply bg-[#2E90FA];
+}
+
+.none {
+  @apply hidden;
+}

package/src/styles.css

@@ -19,3 +19,4 @@
 @import './lib/avatar-profile/avatar-profile.css';
 @import './lib/hierarchical-select/hierarchical-select.css';
 @import './lib/toastr/toastr.css';
+@import './lib/ui-avatar/ui-avatar.css'