@brickclay-org/ui 0.0.66 → 0.0.67

package/index.d.ts

@@ -1936,5 +1936,60 @@ declare class BkColumnSelect implements ControlValueAccessor, OnChanges {
     static ɵcmp: i0.ɵɵComponentDeclaration<BkColumnSelect, "bk-column-select", never, { "searchable": { "alias": "searchable"; "required": false; }; "cacheKey": { "alias": "cacheKey"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "isOpened": { "alias": "isOpened"; "required": false; }; }, { "isOpenedChange": "isOpenedChange"; }, never, never, true, never>;
 }
 
-export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkColumnFilterService, BkColumnSelect, 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, ColumnFilterOption, 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 };
+declare class BkFilePicker implements ControlValueAccessor, Validator {
+    id: string;
+    name: string;
+    accept: string;
+    multi: boolean;
+    disable: boolean;
+    errorMessage: string;
+    hasError: boolean;
+    draggable: boolean;
+    set required(val: boolean);
+    get required(): boolean;
+    private _required;
+    change: EventEmitter<Event>;
+    error: EventEmitter<string>;
+    cancel: EventEmitter<void>;
+    fileInputRef?: ElementRef<HTMLInputElement>;
+    private _value;
+    private _onValidatorChange?;
+    private onChange;
+    private onTouched;
+    writeValue(value: File | File[] | null): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    validate(control: AbstractControl): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
+    get pickerState(): 'default' | 'active' | 'disabled';
+    onContainerClick(): void;
+    onFileChange(event: Event): void;
+    onCancel(): void;
+    onDragOver(event: DragEvent): void;
+    onDrop(event: DragEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BkFilePicker, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkFilePicker, "bk-file-picker", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "multi": { "alias": "multi"; "required": false; }; "disable": { "alias": "disable"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "change": "change"; "error": "error"; "cancel": "cancel"; }, never, never, true, never>;
+}
+
+type FileState = 'uploading' | 'uploaded' | 'failed';
+declare class BkFileCard implements OnInit {
+    id: string;
+    state: FileState;
+    fileName: string;
+    fileSize: string | null;
+    progress: number;
+    errorMessage: string;
+    remove: EventEmitter<string>;
+    /**
+     *
+     */
+    constructor();
+    ngOnInit(): void;
+    onRemove(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BkFileCard, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkFileCard, "bk-file-card", never, { "id": { "alias": "id"; "required": false; }; "state": { "alias": "state"; "required": false; }; "fileName": { "alias": "fileName"; "required": false; }; "fileSize": { "alias": "fileSize"; "required": false; }; "progress": { "alias": "progress"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; }, { "remove": "remove"; }, never, never, true, never>;
+}
+
+export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CalendarSelection, ColumnFilterOption, 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, FileState, 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.66",
+  "version": "0.0.67",
   "schematics": "./schematics/collection.json",
   "ng-add": {
     "save": "dependencies"

package/src/assets/icons/bin-gray.svg

@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 4.98332C14.725 4.70832 11.9333 4.56665 9.15 4.56665C7.5 4.56665 5.85 4.64998 4.2 4.81665L2.5 4.98332" stroke="#6B7080" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.08337 4.14169L7.26671 3.05002C7.40004 2.25835 7.50004 1.66669 8.90837 1.66669H11.0917C12.5 1.66669 12.6084 2.29169 12.7334 3.05835L12.9167 4.14169" stroke="#6B7080" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.7083 7.61664L15.1666 16.0083C15.075 17.3166 15 18.3333 12.675 18.3333H7.32496C4.99996 18.3333 4.92496 17.3166 4.83329 16.0083L4.29163 7.61664" stroke="#6B7080" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.60828 13.75H11.3833" stroke="#6B7080" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.91663 10.4167H12.0833" stroke="#6B7080" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/check-green.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" rx="7" fill="#22973F"/>
+<path d="M10.3333 4.5L5.74996 9.08333L3.66663 7" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/file-card/file-card.css

@@ -0,0 +1,107 @@
+/* Base file-uploader styles */
+.file-uploader {
+  @apply p-4 flex gap-4 border rounded-lg border-transparent bg-[white];
+}
+
+/* Uploading State */
+.file-uploader--uploading {
+  @apply border-[#EFEFF1];
+}
+
+/* Uploaded State */
+.file-uploader--uploaded {
+  @apply border-[#1434CB];
+}
+
+/* Failed State */
+.file-uploader--failed {
+  @apply border-[#FDA4A8] bg-[#FFF1F1];
+}
+
+/* Icon container */
+.file-uploader__icon-container {
+  @apply flex-shrink-0;
+}
+
+/* Icon styles */
+.file-uploader__icon {
+  @apply flex-shrink-0;
+}
+
+/* Content container */
+.file-uploader__content {
+  @apply flex flex-col flex-1 gap-0;
+}
+
+/* Row 1: File Info + Delete */
+.file-uploader__row-1 {
+  @apply flex items-start justify-between;
+}
+
+/* File info container */
+.file-uploader__file-info {
+  @apply flex flex-col;
+}
+
+/* File name */
+.file-uploader__file-name {
+  @apply font-medium text-sm text-[#1B223A];
+}
+
+.file-uploader__file-name--failed {
+  @apply text-[#B41E32] font-normal mb-1; 
+}
+
+/* File size */
+.file-uploader__file-size {
+  @apply text-[#1B223A] font-normal text-sm;
+}
+
+/* Row 2: Progress Bar + Percentage */
+.file-uploader__row-2 {
+  @apply flex justify-between items-center gap-3 mt-1;
+}
+
+/* Remove margin-top for failed state */
+.file-uploader--failed .file-uploader__row-2 {
+  @apply mt-0;
+}
+
+/* Progress bar */
+.file-uploader__progress-bar {
+  @apply flex-1 h-2 bg-[#EFEFF1] rounded-full overflow-hidden;
+}
+
+/* Progress fill */
+.file-uploader__progress-fill {
+  @apply h-full bg-[#1336EF] transition-all duration-300 rounded-full;
+}
+
+.file-uploader__progress-fill--complete {
+  @apply bg-[#22973F];
+}
+
+/* Progress text */
+.file-uploader__progress-text {
+  @apply text-sm text-[#6B7080] font-medium;
+}
+
+/* Checkmark icon */
+.file-uploader__checkmark {
+  @apply flex-shrink-0 size-[14px];
+}
+
+/* Error message */
+.file-uploader__error-message {
+  @apply text-[#B41E32] font-medium text-sm;
+}
+
+/* Try again text */
+/* .file-uploader__try-again {
+  @apply text-[#EF4444] font-normal text-sm cursor-pointer;
+} */
+
+/* Delete icon */
+.file-uploader__delete-icon {
+  @apply flex-shrink-0 cursor-pointer size-5;
+}

package/src/lib/file-picker/file-picker.css

@@ -0,0 +1,106 @@
+/* Wrapper for relative positioning of hidden input */
+.file-picker-wrapper {
+  @apply relative w-full;
+}
+
+/* Hidden native file input */
+.file-picker__input {
+  @apply absolute opacity-0 w-0 h-0 overflow-hidden pointer-events-none;
+}
+
+/* Base file-picker styles */
+.file-picker {
+  @apply py-4 px-6 inline-flex flex-col justify-center items-center rounded-lg cursor-pointer transition-all duration-200 w-full relative;
+}
+
+.file-picker-has-error {
+  @apply border-[#d11e14];
+}
+
+.file-picker-error {
+  @apply text-xs text-[#E7000B] font-normal;
+}
+
+/* Default State */
+.file-picker--default {
+  @apply border border-[#E5F3FF] bg-white;
+}
+
+/* Active State */
+.file-picker--active {
+  @apply border border-[#E5F3FF] bg-[#F4FAFF];
+}
+
+/* Disabled State */
+.file-picker--disabled {
+  @apply border border-[#D6D7DC] bg-[#F4F4F6] opacity-60 cursor-not-allowed;
+}
+
+/* Icon styles */
+.file-picker__icon {
+  @apply mb-3;
+}
+
+/* Text Primary */
+.file-picker__text-primary {
+  @apply font-normal text-sm tracking-normal mb-1;
+}
+
+.file-picker__text-primary--default {
+  @apply text-[#1B223A];
+}
+
+.file-picker__text-primary--active {
+  @apply text-[#1B223A];
+}
+
+.file-picker__text-primary--disabled {
+  @apply text-[#A1A3AE];
+}
+
+/* Text Primary Bold */
+.file-picker__text-primary-bold--default {
+  @apply font-medium text-[#102BA5];
+}
+
+.file-picker__text-primary-bold--active {
+  @apply font-medium text-[#102BA5];
+}
+
+.file-picker__text-primary-bold--disabled {
+  @apply font-medium text-[#A1A3AE];
+}
+
+/* Text Secondary */
+.file-picker__text-secondary {
+  @apply font-normal text-xs leading-[18px];
+}
+
+.file-picker__text-secondary--default {
+  @apply text-[#6B7080];
+}
+
+.file-picker__text-secondary--active {
+  @apply text-[#6B7080];
+}
+
+.file-picker__text-secondary--disabled {
+  @apply text-[#A1A3AE];
+}
+
+/* File list item container */
+.file-picker__file-item {
+  @apply p-4 border border-[#EFEFF1] rounded-lg bg-white flex items-start justify-between mb-1;
+}
+
+.file-picker__file-content {
+  @apply flex gap-4;
+}
+
+.file-picker__file-info-title {
+  @apply font-medium text-sm text-[#1B223A];
+}
+
+.file-picker__file-info-size {
+  @apply text-[#1B223A] font-normal text-sm;
+}

package/src/styles.css

@@ -21,4 +21,6 @@
 @import './lib/toastr/toastr.css';
 @import './lib/ui-avatar/ui-avatar.css';
 @import './lib/column-select/components/column-select/column-select.css';
+@import './lib/file-picker/file-picker.css';
+@import './lib/file-card/file-card.css';