@brickclay-org/ui 0.0.49 → 0.0.50

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';
@@ -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, 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 };
 //# sourceMappingURL=brickclay-org-ui.mjs.map